<template>
  <div>
    <!-- 选择框 -->
    <div class="app_top_div">
        <div class="xm_tab">
          <tab bar-active-color="#0BA6C7" active-color="#0BA6C7" :line-width="1" custom-bar-width="60px">
            <tab-item selected  @on-item-click="changeScoringType(2)">扣分项</tab-item>
            <tab-item  @on-item-click="changeScoringType(1)">加分项</tab-item>
            
          </tab>
       </div>
        <div class="cate_tab">
             <tab :scroll-threshold="4"  active-color="#1EBADB" default-color="#626262" :line-width="0">
                <tab-item v-for="(po,index) in serverData.cateList" @on-item-click="clickCataTab" :key="index" :selected="index===0"><span>{{po.name}}</span></tab-item>
            </tab>
       </div>
    </div>
    <!--end 头部搜索 -->
  <div class="center_div">
     <div class="select_project_box div_magin10">
            <ul class="kaidan_ul">
                 <li class="right_li" :num="index"  :key="index" v-for="(po,index) in serverData.itemList">
                    <div class="click_to_green right_item" @click="doClickItem(index)">
                        <icon type="zhengque"  :class="[po.checked ? 'color_primary' : 'color_unselect']"/>
                        <div class="right_li_div">{{po.name}}<span class="border_radus"   v-if="po.scoringRule != 2"
                          :class="[po.scoringType==1 ? 'color_green' : 'color_red']">{{ po.scoringType==1 ? '+'+po.points : '-'  +po.points }}分</span></div>
                    </div>
                     <!-- 如果是看情况 -->
                    <div class="right_li_other"  v-if="po.scoringRule == 2">
                        <group class="cell_no_border" title="" gutter="0" label-width="3em" label-margin-right="2em" label-align="justify">
                            <x-input @on-blur="fixScroll" @on-focus="focusInput"  :id="'input'+po.id" class="jump_input" type="number" :title="po.scoringType==1 ? '加分' : '扣分'"  @input="chenkInput(po.appropriateFloor,po.appropriateTop,index)" :placeholder="po.placeholderText"  v-model="po.points"></x-input>
                            <x-textarea @on-blur="fixScroll"  @on-focus="focusInput" :id="'textarea'+po.id" title="事由" :placeholder="po.scoringType==1 ? '请描述加分事由，限30字' : '请描述扣分事由，限30字'" :max="30"  v-model="po.appropriateExplain" :show-counter="false" :rows="3"></x-textarea>
                          </group>
                    </div>
                 </li>

                  <li class="right_li"  v-if="serverData.itemList.length==0">
                    <div class="no_kaohe" >
                       暂无考核项目
                    </div>
                 </li>
               
            </ul>
        </div>
  </div>
    <!-- 底部的确定 -->
    <div class="buttom_div key_alert_hide">
        <x-button type="primary" @click.native="doOk" class="dskt_btn">确定</x-button>
     </div>

  </div>
</template>

<script>
import itemService from '../../shared/service/itemService'

import { Tab, TabItem ,Group,XNumber,XTextarea,XInput } from 'vux'

export default {
   components: {
    Tab,
    TabItem,
    Group,
    XNumber,
    XTextarea,XInput,
  },
  data() {
    var data = {  errormsg:"123",};
    data.view = {
        itemIndex:0 //默认选择第一个
    }
    data.searchData={
        scoringType:2,//2是扣分
    }
    data.hasSelectMap = new Map();
    var list = this.$dbUtil.get( this.$dbUtil.key.SELECT_PROJECT_LIST );
    for (let i = 0; i < list.length; i++) {
      const item = list[i];
      if(item.checked){
          data.hasSelectMap.set(item.id,item);
      }
     
    }

    data.serverData = {
       cateList:[
       /*   {name:"宿舍记录"},
         {name:"学习纪律"},
         {name:"网络文明"},
         {name:"理想信念"},
         {name:"运动能力"},
         {name:"学习能力"},
         {name:"文化水平"}, */
       ],
      itemList:[
       ],
    }

     var m = navigator.userAgent;
      var isIos = !!m.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);                  //ios终端       
      data.isIos = isIos;
    return data;
  },
  mounted() {
    this.doGetCataList();
    var documenHeight = $(window).height();
    var that =this;
    window.onresize = function temp() {
        if($(this).height() < documenHeight) {
          $(".key_alert_hide").addClass("div_hide");
        } else {
          $(".key_alert_hide").removeClass("div_hide");
        }
    };
  },
  methods: {
    focusInput:function(){
        var tar = event.target;
        var that =this;
        var temp = $(tar);

        while(!temp.hasClass("right_li")){
          temp = temp.parent();
        }
        var tempNum = temp.attr("num");
        var sssheight = 0
        $(".kaidan_ul li").each(function(i,e){
            var num = $(e).attr("num");
            if(parseInt(tempNum) < parseInt(num)){
                return;
            }else{
                sssheight+=$(e).height();
            }
        });
        if(that.isIos){
            var documenHeight = $(".center_div").height();
            if(sssheight<documenHeight/2){

            }else{
               tar.scrollIntoView({block: "center", inline: "center"});
            }
            return;
         }
        setTimeout(() => {
            var documenHeight = $(".center_div").height();
            that.errormsg=sssheight+" = "+documenHeight;
          $(".view-router").animate({scrollTop: sssheight-88}, 0);
        }, 500);
    },
    //列表-编辑 , 开单按钮
    toEdit(viewType,id) {
      this.$router.push({ name: "order_detail", query: { viewType: viewType ,id: id } });
    },
    doGetCataList(){
       itemService.getCateList().then((res)=>{
         var data = res.data;
         this.serverData.cateList = data;
         if(data.length>0){
           //如果数量大于0  加载第一列表
           this.doGetItemList(data[0].id);
         }
       });
    },
    checkIsInputOk(dataList){
      for (let i = 0; i <  dataList.length; i++) {
         const item =  dataList[i];
         //如果选中 添加进去  没有的话 map里面有删除了
         if(item.checked && item.scoringRule == 2){
            if(!item.appropriateExplain){
              this.$vux.toast.text(item.name+" - 事由未设置完整");
              $('#textarea'+item.id).addClass("border_red");
              return false;
            }else{
              $('#textarea'+item.id).removeClass("border_red");
            }
         }
       }
        return true;
    },
    doGetItemList(checkBigCateId){
       /* 请求新的数据之前 先保存一下 */
      var reqData={
        scoringType:this.searchData.scoringType,
        checkBigCateId:checkBigCateId
      };
       itemService.getItemList(reqData).then((res)=>{
         var datas = res.data;
         for (let i = 0; i < datas.length; i++) {
           var data =datas[i];
           if(this.hasSelectMap.has(data.id)){
             data.checked = true;
             datas[i] =this.hasSelectMap.get(data.id);
           }else{
             if(data.scoringRule == 2){
               data.points="";
             }
             data.placeholderText = '限'+data.appropriateFloor+'-'+data.appropriateTop;
             data.checked = false;
           }
         }
         //吧数据保存一下 然后再删除
         this.selectDataToMap();
         this.serverData.itemList = datas;
       });
    },
    changeScoringType(val){
        this.searchData.scoringType=val;
        this.doGetItemList(  this.serverData.cateList[this.view.itemIndex].id );
        if(!this.checkIsInputOk(this.serverData.itemList)){
          
        }
    },
    clickCataTab(index){
      this.view.itemIndex=index;
      this.doGetItemList( this.serverData.cateList[index].id);
      if(!this.checkIsInputOk(this.serverData.itemList)){
      }
    },
    doClickItem(index){
       this.serverData.itemList[index].checked = !this.serverData.itemList[index].checked;
    },
    chenkInput(min,max,index){
   /*    var input_points =  this.serverData.itemList[index].points+"";
        input_points = input_points.replace(/[^\d]+/g, '');
        min = parseInt(min);
        max = parseInt(max);
        input_points = parseInt(input_points);
        if(input_points<min){
          input_points=min;
        }else if(input_points>max){
          input_points=max;
        }
        this.serverData.itemList[index].points = input_points;

       var thisDom = event.currentTarget;
        thisDom.value=input_points;
        $(thisDom).val(2);
        console.log(event); */
    },
    selectDataToMap(){
      //先遍历一遍当前的list 吧选中的放入map
       for (let i = 0; i <  this.serverData.itemList.length; i++) {
         const item =  this.serverData.itemList[i];
         //如果选中 添加进去  没有的话 map里面有删除了
         if(item.checked){
            this.hasSelectMap.set(item.id,item);
         }else if(this.hasSelectMap.has(item.id)){
            this.hasSelectMap.delete(item.id)
         }
         
       }
    },
    fixScroll(){
      AllFixScroll();
    },
    //确认事件
    doOk() {
      this.selectDataToMap();
       //如果是选择了学生确认时间
       if(this.hasSelectMap.size<=0){
        this.$vux.toast.text("请选择计分项!");
        return;
      } 
     
      var dataList = [];
      var isOkName="";
      this.hasSelectMap.forEach((value,key)=>{
          if(value.scoringRule==2 && (value.points<value.appropriateFloor || value.points>value.appropriateTop)  ){
            isOkName=value.name;
            $('#input'+value.id).addClass("border_red");
          }else{
            $('#input'+value.id).removeClass("border_red");
          }
　　　　　 dataList.push(value);
　　　　});
      if(isOkName!=""){
             this.$vux.toast.text(isOkName+" 分数超出限制");
              return;
      }
      if(!this.checkIsInputOk(dataList)){
        return false;
      }
      //把选择的用户保存到数据库中
      this.$dbUtil.set( this.$dbUtil.key.SELECT_PROJECT_LIST , dataList );
      //把上一页传过来的东西保存到数据库 证明 数据成功了
      this.$dbUtil.set( this.$dbUtil.key.SELECT_PROJECT_VIEW , this.$route.query.toProjectViewOkFlag );
      
      this.$router.back(-1);
    },
  }
};
</script>
<style scoped>
</style>
<style scoped>
.view-router {
    padding-top: 88px;
    padding-bottom: 60px;
}


/* 头的div */
.app_top_div{
      position: fixed;
      width: 100%;
      top:0;
      z-index: 100;
}
.xm_tab{
    padding: 0 10%;
    background: white;
}
.xm_tab .vux-tab .vux-tab-item{
    background: linear-gradient(180deg, #fff, #fff, rgba(229, 229, 229, 0)) bottom left no-repeat;
}
.vux-tab{
     background:#F1FBFF;
}
.cate_tab .vux-tab .vux-tab-item{
    background:#F1FBFF;
}
.cate_tab .vux-tab .vux-tab-selected span{
    border:1px solid #ACDDE8;
    border-radius: 15px;
    padding: 5px 5px;;
    height: 44px;
}
/* end 头的div */

/* 选择的列表样式 */
.select_project_box{
    background:white;
    border-radius: 6px;
    padding: 15px 8px;;
    margin: 15px 8px;

}
.no_kaohe{
  text-align:center;
}
.select_project_box .right_li .right_item{
     padding: 15px 0 8px 0;
}
.select_project_box .right_li .right_li_other{
     padding-left:20px
}
.select_project_box .right_li:not(:first-child){
      border-top:1px solid #D9D9D9;
}
/* end 选择的列表样式 */

/* 底部的div */
.buttom_div{
  width: 100%;
  height: 60px;
  position: fixed;
  z-index: 500;
  bottom: 0;
  background:rgba(242,251,254,1);
  box-sizing: border-box;
  box-shadow:0px 0px 5px 0px rgba(0, 0, 0, 0.08);
  padding: 8px 20%;
}
.buttom_div .dskt_btn{
  height:44px;
}
.border_red{
  border: 1px solid red;
}
/*end 底部的div */
</style>
